<template>
  <div class="fazx-nav-bar">
    <div class="nav-box">
      <div class="logo-box">
        <a href="/home">
          <img src="../../../assets/img/common/logo.png" alt="">
        </a>
      </div>
      <div class="list-box">
        <!-- 大类-s -->
        <div
          class="list-item"
          v-for="item in lists"
          :key="item.name"
        >
          <!-- 公安主导-s -->
          <div
            class="list"
            v-for="(conItem, index) in item.gazd"
            :key="conItem.name"
            v-show="$route.query.name === 'gazd'"
          >
            <a
              :href="conItem.link"
              :class="{active: currentIndex === index}"
            >
              <span>{{ conItem.name }}</span>
            </a>
          </div>
          <!-- 公安主导-e -->
          <!-- 住建主导-s -->
          <div
            class="list"
            v-for="(conItem, index) in item.zjzd"
            :key="conItem.name"
            v-show="$route.query.name === 'zjzd'"
          >
            <a
              :href="conItem.link"
              :class="{active: index === currentIndex}"
            >
              <span>{{ conItem.name }}</span>
            </a>
          </div>
          <!-- 住建主导-e -->
          <!-- 街道主导-s -->
          <div
            class="list"
            v-for="(conItem, index) in item.jdzd"
            :key="conItem.name"
            v-show="$route.query.name === 'jdzd'"
          >
            <a
              :href="conItem.link"
              :class="{active: index === currentIndex}"
            >
              <span>{{ conItem.name }}</span>
            </a>
          </div>
          <!-- 街道主导-e -->
          <!-- 企业主导-s -->
          <div
            class="list"
            v-for="(conItem, index) in item.qyzd"
            :key="conItem.name"
            v-show="$route.query.name === 'qyzd'"
          >
            <a
              :href="conItem.link"
              :class="{active: index === currentIndex}"
            >
              <span>{{ conItem.name }}</span>
            </a>
          </div>
          <!-- 企业主导-e -->
          <!-- 智慧园区-s -->
          <div
            class="list"
            v-for="(conItem, index) in item.zhyq"
            :key="conItem.name"
            v-show="$route.query.name === 'zhyq'"
          >
            <a
              :href="conItem.link"
              :class="{active: index === currentIndex}"
            >
              <span>{{ conItem.name }}</span>
            </a>
          </div>
          <!-- 智慧园区-e -->
          <!-- 数字乡村-s -->
          <div
            class="list"
            v-for="(conItem, index) in item.szxc"
            :key="conItem.name"
            v-show="$route.query.name === 'szxc'"
          >
            <a
              :href="conItem.link"
              :class="{active: index === currentIndex}"
            >
              <span>{{ conItem.name }}</span>
            </a>
          </div>
          <!-- 数字乡村-e -->
        </div>
        <!-- 大类-e -->

      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "FazxNavBar",
    data() {
      return {
        currentIndex: 0,
        lists: [
          // 公安主导-s
          {
            gazd: [
              {
                name: "首页",
                link: "/home"
              },
              {
                name: "现状分析",
                link: "#xzfx"
              },
              {
                name: "业务需求",
                link: "#ywxq"
              },
              {
                name: "建设目标",
                link: "#jsmb"
              },
              {
                name: "方案架构",
                link: "#fajg"
              },
              {
                name: "方案特点",
                link: "#fatd"
              },
            ],
          },
          // 公安主导-e
          // 住建主导-s
          {
            zjzd: [
              {
                name: "首页",
                link: "/home"
              },
              {
                name: "政策背景",
                link: "#zcbj"
              },
              {
                name: "需求分析",
                link: "#xqfx"
              },
              {
                name: "建设目标",
                link: "#jsmb"
              },
              {
                name: "方案架构",
                link: "#fajg"
              },
              {
                name: "建设内容",
                link: "#jsnr"
              },
            ],
          },
          // 住建主导-e
          // 街道主导-s
          {
            jdzd: [
              {
                name: "首页",
                link: "/home"
              },
              {
                name: "现状分析",
                link: "#xzfx"
              },
              {
                name: "建设目标",
                link: "#jsmb"
              },
              {
                name: "建设思路",
                link: "#jssl"
              },
              {
                name: "方案架构",
                link: "#fajg"
              },
              {
                name: "建设内容",
                link: "#jsnr"
              },
            ],
          },
          // 街道主导-e
          // 企业主导-s
          {
            qyzd: [
              {
                name: "首页",
                link: "/home"
              },
              {
                name: "需求分析",
                link: "#xqfx"
              },
              {
                name: "建设目标",
                link: "#jsmb"
              },
              {
                name: "全生命周期",
                link: "#smzq"
              },
              {
                name: "方案定位",
                link: "#fadw"
              },
              {
                name: "方案价值",
                link: "#fajz"
              },
            ],
          },
          // 企业主导-e
          // 企业主导-s
          {
            zhyq: [
              {
                name: "首页",
                link: "/home"
              },
              {
                name: "园区现状",
                link: "#yqxz"
              },
              {
                name: "建设理念",
                link: "#jsln"
              },
              {
                name: "建设目标",
                link: "#jsmb"
              },
              {
                name: "应用场景",
                link: "#yycj"
              },
              {
                name: "方案架构",
                link: "#fajg"
              },
              {
                name: "方案价值",
                link: "#fajz"
              },
            ],
          },
          // 企业主导-e
          // 数字乡村-s
          {
            szxc: [
              {
                name: "首页",
                link: "/home"
              },
              {
                name: "政策背景",
                link: "#zcbj"
              },
              {
                name: "现状分析",
                link: "#xzfx"
              },
              {
                name: "建设目标",
                link: "#jsmb"
              },
              {
                name: "方案架构",
                link: "#fajg"
              },
              {
                name: "建设内容",
                link: "#jsnr"
              },
              {
                name: "方案价值",
                link: "#fajz"
              },
            ],
          },
          // 数字乡村-e
        ]
      }
    },
  }
</script>

<style lang="scss">

  .fazx-nav-bar {
    width: 100%;
    height: 64px;
    position: absolute;
    left: 0;
    right: 0;
    top: 40px;
    z-index: 10;
    .nav-box {
      width: 62.5%;
      height: 100%;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .logo-box {
        img {
          margin-left: -4px;
        }
      };
      .list-box {
        margin-right: -14px;
        .list-item {
          display: flex;
          .list {
            margin-left: 2.4rem;
            a {
              span {
                font-size: 1.6rem;
                color: #fff;
                padding: 0.8rem 0.4rem;
              }
            };
            .active {
              span {
                border-bottom: 0.2rem solid #fff;
              }
            };
            a:hover {
              span {
                border-bottom: 0.2rem solid #fff;
              }
            }
          };
        }
      };
    }
  }

</style>